<template>
  <div class="news-content">
    <div class="container">
      <div class="left">
        <div>
          <app-detail-left-hot></app-detail-left-hot>
        </div>
        <div class="left-body">
          <div
          v-for="item of 8"
          class="left-item">招生政策</div>
        </div>
        <div style="margin-top: 20px;">
          <app-hot-tag></app-hot-tag>
        </div>

      </div>
      <div class="right" :style="{'height':center_height!=0?center_height+'px':'auto'}">

        <!--  -->
        <div style="margin-bottom: 20px;">
          <app-detail-list></app-detail-list>
        </div>
        <!--  -->
        <div style="margin-bottom: 20px;">
          <app-detail-icon></app-detail-icon>
        </div>
        <!--  -->
        <div style="margin-top: 20px;" class="form">
          <swiper :sw_params="sw_params" height="106px"></swiper>
          <app-detail-form></app-detail-form>
          <!--  -->
          <div style="margin-top: 20px;">
            <app-detail-footer></app-detail-footer>
          </div>
        </div>



      </div>
      <div class="center" ref="center">
        <div class="tag-body">
          <div class="tag-body-line">
            <div class="tag-name">专业类别</div>
            <div class="tag-right">
              <div class="tag-item active">经济学</div>
              <div
              v-for="item of 6"
              class="tag-item">哲学</div>
            </div>
          </div>

          <div class="tag-body-line">
            <div class="tag-name">专业名称</div>
            <div class="tag-right">
              <div class="tag-item active">能源经济</div>
              <div
              v-for="item of 11"
              class="tag-item">国际贸易与经济</div>
            </div>
          </div>
        </div>

        <div class="tag-c">
          <h1 class="major-title">
            <span class="cn">能源经济</span>
            <span class="eng">Energy Economics</span>
          </h1>
          <div class="desc">
            <div class="desc-title">简介</div>
            <p class="desc-word">本专业将能源和经济结合起来，包括能源的战略选择、能源的融资
            、能源的预测、能源企业的组织形式等，以能源为研究对象，涉及到经济管理方面的内容;
            主要学习能源经济及其运行管理方面的基本知识和方法，熟悉能源经济运行规律和能源政策法规，
            熟练掌握现代能源经济分析方法及管理技能；能在能源企业、政府能源管理部门、能源交易及中介组织、
            教学及研究机构等单位和部门从事能源预警预测分析、能源政策研究、能源管理等工作。</p>
          </div>
          <h1 class="b-title">基本信息</h1>
          <div class="zy-body">
            <div class="zy-item">
              <span class="zy-name">专业名称：</span>
              <span class="zy-word">能源经济</span>
            </div>
            <div class="zy-item">
              <span class="zy-name">英文名称：</span>
              <span class="zy-word">Energy Economics</span>
            </div>
            <div class="zy-item zy-item2">
              <span class="zy-name">专业代码：</span>
              <span class="zy-word">020106</span>
            </div>
            <div class="zy-item">
              <span class="zy-name">专业类别：</span>
              <span class="zy-word">经济学</span>
            </div>
            <div class="zy-item3 zy-item">
              <span class="zy-name">从业方向：</span>
              <span class="zy-word">公务员、人力资源专员/助理、证券分析/金融研究、公司业务</span>
            </div>
          </div>
          <h1 class="b-title">开设课程</h1>
          <div class="kc-body">
            <div
            v-for="item of 12"
            class="kc-item">能源战略与能源安全</div>
          </div>
          <h1 class="b-title">就业前景</h1>
          <div class="qj-body">各类能源经营与管理部门、事业单位、各级银行和金融机构、自能源企业及下设能源规划与管理部门、
          跨国能源生产与贸易企业、能源物流企业、能源投资与交易机构从事能源生产经营管理、
          能源期货与期权交易、能源国际合作与开发等工作
          ，从事上述各类能源领域的调研咨询、政策分析、市场策划、业务操作与管理等工作，
          也能够在科研机构、高等院校从事教学科研工作。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import appHotTag from '@/components/app-hot-tag.vue'
import appDetailLeftHot from '@/components/app-detail-left-hot.vue'
import appDetailIcon from '@/components/app-detail-icon.vue'
import appDetailList from '@/components/app-detail-list.vue'
import appDetailForm from '@/components/app-detail-form.vue'
import swiper from '@/components/swiper.vue'
import appDetailFooter from '@/components/app-detail-footer.vue'
export default {
  name:'product-index',
  components:{
    appDetailFooter,
    appDetailIcon,
    appDetailList,
    appDetailForm,
    appHotTag,
    appDetailLeftHot
  },
  data(){
    return{
      sw_params:{
        logoOption: {//swiper配置
              loop: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              autoplay: {
                delay: 1000,
              }
        },
        data:[
          {
            url:'http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png'
          }
        ]
      },
      center_height:0
    }
  },
  methods:{
    getCenterHeight(){
      console.log(this.$refs.center.offsetHeight)
      this.center_height = this.$refs.center.offsetHeight
    }
  },
  mounted() {
    this.getCenterHeight()
  }
}
</script>

<style scoped="scoped" lang="scss">
/* .diss{
  width: 500px;
  height: 500px;
  background: url('~static/1.png') repeat;
}
 */
.tag-c{
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  .qj-body{
    padding: 15px;
    font-size: 16px;
    color: $text1_color;
    background-color: #f8f8f8;
    margin-top: 10px;
  }
  .kc-body{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #c9caca;
    border-radius: 10px;
    .kc-item{
      margin-right: 10px ;
      margin-bottom: 10px;
      font-size: 16px;
      color: $text1_color;
      position: relative;
      padding-left: 10px;
      &::after{
        content: '';
        position: absolute;
        left: 3px;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: $active_color;
      }
    }
  }
  .major-title{
    display: flex;
    font-weight: bold;
    align-items: center;
    .cn{
      font-size: 26px;
      color: $active_color;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        right: -14px;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #c9caca;
      }
    }
    .eng{
      margin-left: 30px;
      font-size: 24px;
      color: #c9caca;
    }
  }
  .desc{
    margin-top: 20px;
    background-color: #f8f8f8;
    padding: 15px;
    box-sizing: border-box;
    .desc-title{
      width: 76px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      color: white;
      background-color: #f5243e;
      border-radius: 4px;
    }
    .desc-word{
      margin-top: 10px;
      font-size: 16px;
      color: #3e3a39;
    }
  }
  .b-title{
    margin-top: 20px;
    font-size: 22px;
    color: $text1_color;
    font-weight: bold;
  }
  .zy-body{
    overflow: hidden;
    .zy-item{
      float: left;
      margin-right: 5%;
      width: 30%;
      overflow: hidden;
      font-size: 16px;
      color: $text1_color;
      margin-top: 15px;
      .zy-name{
        float: left;
        width: 80px;
      }
      .zy-word{
        width: calc(100% - 80px);
        float: left;
      }
      &.zy-item2{

        margin-right: 0;
      }
      &.zy-item3{
        width: 60%;
      }
    }
  }
}
.news-item{
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #F5F6F7;
  cursor: pointer;
  transition: all 0.3s;

  &:hover{
    box-shadow: 0 0 20px 0 #d1d1d1cc;
    background: #fafafa;
    .news-title{
      color: $active_color;
    }
  }
  .news-title{
    font-size: 18px;
    color: $text1_color;
  }
  .news-bot{
    justify-content: space-between;
    display: flex;
    margin-top: 10px;
    align-items: center;
    .bot-left{
      width: 130px;
      display: flex;
      align-items: center;
      .img{
        width: 30px;
        height: 30px;
        border-radius: 30px;
      }
      p{ margin-left: 5px;
        font-size: 16px;
        color: #595757;
      }
    }
    .bot-center{
      font-size: 14px;
      color: #898989;
      width: 480px;
    }
    .bot-right{
      padding-left: 20px;
      display: flex;
      align-items: center;
      p{
        margin-left: 5px;
        font-size: 14px;
        color: #6c77e8;
      }
    }
  }
}


.news-content{
  background-color: #F5F6F7;
  min-height: 1200px;
}
.container{
  padding-top: 20px;
}
.left{
  width: 150px;
  // background-color: white;
  // height: 100px;
  float: left;
  position: sticky;
  left: 0;
  top: 156px;
}
.form{
  position: sticky;
  right: 0;
  top: 156px;
}
.right{
  width: 288px;
  // background-color: white;
  // height: 100px;
  float: right;
}
.center{
  width: 730px;
  margin-left: 166px;
  background-color: white;
  .tag-body{
    border-bottom: 16px solid #f5f6f7;
    padding:5px 15px;
    .tag-body-line{
      overflow: hidden;
      border-bottom: 1px dashed #b5b5b6;
      display: flex;
      box-sizing: border-box;
      padding: 10px 0;
      &:last-child{
        border-bottom: 1px dashed transparent;
        padding-bottom: 0;
      }
      .tag-name{
        font-size: 16px;
        color: $text1_color;
        border-right: 1px dashed #b5b5b6;
        width: fit-content;
        width: 86px;
        line-height: 44px;
      }
      .tag-right{
        width: calc(100% - 86px);
        box-sizing: border-box;
        padding:0 10px;
        display: flex;
        flex-wrap: wrap;
        .tag-item{
          margin-right: 10px;
          color: #595757;
          padding: 5px 10px;

          font-size: 16px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
          border-radius: 4px;
          margin-bottom: 5px;
          margin-top: 5px;
          &:hover{
            color: white;
            background-color: $active_color;
          }
          &.active{
            color: white;
            background-color: $active_color;
          }
        }
      }
    }
  }

}
.left-body{
  margin-top: 20px;
  .left-item{
    font-size: 16px;
    color: $text1_color;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: white;
    border-top: 2px solid #f8f8f8;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
    &:first-child{
      border-top: none;
    }
    &.active{
      background-color: $active_color;
      color: white;
    }
    &:hover{
      background-color: $active_color;
      color: white;
    }
  }
}
</style>
